<div class="cad-search">

  <!--头部-->
  <div class="cad-title-wrapper">

    <!--logo-->
    <apes-card class="query-wrapper">

      <div class="assembly-drawing-logo">
        <img src="./assets/tmp/img/cad/assemblyDrawing.png" style="width: 100%;height: 100%;border-radius: 10px;">
      </div>

      <!--<div style="position: absolute;top: 0;right: 0;">{{cacheData | json}}</div>-->

      <div class="assembly-drawing-btn">
        <button apes-button apesType="primary" style="margin-right: 8px;" (click)="checkBlack()">
          返回{{showBlackBtn()}}</button>

        <button apes-button apesType="primary" style="margin-right: 8px;" (click)="refreshData()">刷新</button>
      </div>

      <div class="assembly-drawing-VIN">
        车架号：{{cacheData.vin}}
      </div>

    </apes-card>

    <!--车辆配置-->
    <apes-card class="model-info-wrapper">
      <cad-model-info></cad-model-info>
    </apes-card>

    <!--免责声明-->
    <div class="car-disclaimer">
      <p>免责声明：</p>
      <p>装配图数据仅供参考，以原车数据为准！</p>
    </div>

  </div>

  <!--搜索栏-->
  <div class="cad-control">

    <div style="float: left; height: 100%; padding-left: 16px;margin-right: 16px;">

      <apes-select style="position: relative;top: -4px;width: 150px;"
                   [(ngModel)]="searchType"
                   (ngModelChange)="searchTypeChange($event,true)">
        <ng-container *ngFor="let list of searchTypeList">
          <apes-option [apesValue]="list.id" [apesLabel]="list.name"></apes-option>
        </ng-container>
        <!--        <apes-option [apesValue]="'yes'" [apesLabel]="'不匹配'"></apes-option>-->
        <!--        <apes-option [apesValue]="'no_auto'" [apesLabel]="'匹配车型'"></apes-option>-->
      </apes-select>

    </div>

    <!--    <div style="float: left; height: 100%; margin-left: 16px; width: 350px;">-->
    <!--      <div apes-row [apesGutter]="16" class="apes-item" style="padding: 0;">-->
    <!--        <formly-form [model]="searchModel" [fields]="searchField"></formly-form>-->
    <!--      </div>-->
    <!--    </div>-->

    <div style="float: left; height: 100%; margin-left: 16px; width: 270px;">
      <div apes-row [apesGutter]="16" class="apes-item" style="padding: 0;">
        <input apes-input [(ngModel)]="inputValue"
               [placeholder]="searchType == 'no_auto'? '请输入配件名称/OE号搜索':'请输入配件名称/商品型号/商品编码/商品名称进行搜索'"
               (keyup)="searchChange()"/>
      </div>
    </div>

    <div style="float: left; height: 100%; padding-left: 16px;">
      <div
        apes-tooltip
        [apesTooltipTitle]="'标准配件目录'">
        <button apes-button
                style="padding: 4px"
                [apesType]="'default'"
                [disabled]="searchLoading"
                (click)="partsMenuTree()">
          <i apes-icon apesType="search"></i>
        </button>
      </div>
    </div>

    <div style="float: left; height: 100%; padding-left: 8px;">
      <button apes-button apesType="primary" [apesLoading]="searchLoading" [disabled]="checkSearch()"
              (click)="searchMatchPartsName()">
        <!--        <i apes-icon apesType="search"></i>-->
        搜索
      </button>
    </div>

    <div style="float: left; height: 40px;">
      <apes-breadcrumb apesSeparator=">" style="padding: 10px;">
        <apes-breadcrumb-item *ngIf="cacheData['carModelLabel']">
          <span class="cad-control-step" (click)="goToMenu('mainMenu')">车型：{{cacheData['carModelLabel']}}</span>
        </apes-breadcrumb-item>
        <apes-breadcrumb-item *ngIf="mainMenuData['name']">
          <span class="cad-control-step" (click)="goToMenu('subMenu')">{{mainMenuData['name']}}</span>
        </apes-breadcrumb-item>
        <apes-breadcrumb-item *ngIf="subMenuData['name']">
          <span>{{filterName(subMenuData['name'])}}</span>
        </apes-breadcrumb-item>
      </apes-breadcrumb>
    </div>

    <div style="float: right; padding-right: 6px;">

      <!--隐藏显示-->
      <div *ngIf="showType == 3" class="cad-control-showHidden" (click)="checkShowHidden()">
        <i *ngIf="!showHidden" apes-icon apesType="eye-invisible"></i>
        <i *ngIf="showHidden" apes-icon apesType="eye"></i>
      </div>

      <!--返回-->
      <button style="margin-right: 8px" apes-button apesType="primary" (click)="toggle(showType)"
              [disabled]="showDisabled">返回{{showTypeText()}}
      </button>

      <!--上一组-->
      <button style="margin-right: 8px" apes-button apesType="primary" [disabled]="showType !== 2"
              [apesLoading]="isLastLoading"
              (click)="lastSubgroup()">上一组
      </button>

      <!--下一组-->
      <button style="margin-right: 8px" apes-button apesType="primary" [disabled]="showType !== 2"
              [apesLoading]="isNextLoading"
              (click)="nextSubgroup()">下一组
      </button>

      <!--侧边购物车-->
      <apes-badge *ngIf="showPublicPage()" [apesCount]="shoppingData.length" [apesStyle]="{'right': '-15px'}">

        <button style="margin-right: 8px" apes-button apesType="primary" (click)="goShoppingCar()">配件确认单</button>

        <!--        <button style="margin-right: 8px" apes-button apesType="primary" (click)="openShoppingCart()">配件篮-->
        <!--          &lt;!&ndash;<i style="font-size: 16px;" apes-icon apesType="shopping-cart"></i>&ndash;&gt;</button>-->

      </apes-badge>

      <!--购物车-->
      <apes-drawer [apesClosable]="false" [apesWidth]="'25vw'" [apesVisible]="shoppingVisible" apesPlacement="right"
                   (apesOnClose)="closeShoppingCart()">

        <!--商品栏-->
        <div class="cad-shop-list">
          <apes-card class="cad-shop-box" *ngFor="let item of shoppingData; let i = index;">
            <div apes-row class="cad-shop-box-row">

              <!--选择框-->
              <!--<div apes-col [apesSpan]="2" class="cad-shop-box-col">-->
              <!--<label class="cad-shop-box-checkbox" apes-checkbox [(ngModel)]="item.selected"-->
              <!--(change)="checkSelectAll()"></label>-->
              <!--</div>-->

              <!--图片-->
              <div apes-col [apesSpan]="10" class="cad-shop-box-col">
                <div class="cad-shop-img-box">
                  <img *ngIf="item.url" class="cad-shop-img" [src]="item.url.url"/>
                  <div *ngIf="!item.url" class="cad-shop-noImg">
                    暂无图片
                  </div>
                </div>
              </div>

              <!--商品信息-->
              <div apes-col [apesSpan]="14" class="cad-shop-box-col">

                <!--名称-->
                <div class="cad-shop-name">{{filterName(item.partName)}}</div>

                <!--名称-->
                <div *ngIf="item.parts.length> 0" style="padding: 0 6px;">{{item.parts[0]['PJMC']}}</div>

                <!--备注-->
                <div *ngIf="item.positionConfirma" style="padding: 0 6px;">备注：{{item.positionConfirma}}</div>

                <!--数量-->
                <div class="cad-shop-num">

                  <apes-input-group [apesPrefix]="addTemplate" [apesSuffix]="pruneTemplate">
                    <input type="number" style="text-align: center" apes-input [(ngModel)]="item.orderQuantity"/>
                  </apes-input-group>
                  <ng-template #addTemplate>
                    <div class="cad-shop-num-btn" (click)="setNum(i,'prune')">-</div>
                  </ng-template>
                  <ng-template #pruneTemplate>
                    <div class="cad-shop-num-btn" (click)="setNum(i,'add')">+</div>
                  </ng-template>

                </div>

                <!--删除-->
                <div class="cad-shop-delete">
                  <!--<div apes-col [apesSpan]="2" class="cad-shop-box-col">-->
                  <i apes-icon apesType="delete" (click)="deleteShop(i)"></i>
                </div>

              </div>

            </div>
          </apes-card>
        </div>

        <!--去购物车栏-->
        <apes-card class="cad-shop-car">
          <!--<label class="cad-shop-car-checkbox" apes-checkbox [(ngModel)]="selectAll"-->
          <!--(ngModelChange)="clickSelectAll()">-->
          <!--<span style="position: absolute;top: 3px;">全选</span>-->
          <!--</label>-->
          <div class="cad-shop-car-parts">已选{{partsNumber()}}商品</div>
          <div class="cad-shop-car-btn">
            <button apes-button [apesType]="'primary'" [disabled]="shoppingData.length == 0" (click)="goShoppingCar()">
              配件确认单
            </button>
          </div>
        </apes-card>

      </apes-drawer>

    </div>

  </div>

  <!--主体-->
  <div class="cad-wrapper">

    <!--菜单-->
    <apes-card class="cad-menu" [ngStyle]="showType == 1 ? {'display':'block'} : {'display':'none'}">
      <cad-menu></cad-menu>
    </apes-card>

    <!--右侧主体-->
    <apes-card class="cad-content">

      <!--子组主体-->
      <cad-level-list [ngStyle]="showType == 1 ? {'display':'block'} : {'display':'none'}"
                      style="width: inherit;" [isQuery]="isQuery"></cad-level-list>
      <!--<apes-modal [(apesVisible)]="filterPartsVisible" apesTitle="The first Modal" (apesOnCancel)="filterPartsCancel()" (apesOnOk)="filterPartsData(selectData)">-->
      <!--<p>-->
      <!--<apes-select style="width: 200px;" apesPlaceHolder="请选择标准配件名称" (ngModelChange)="filterPartsData($event)">-->
      <!--<apes-option *ngFor="let data of selectData" [apesLabel]="data.PJMC" [apesValue]="data.PJMCID" ></apes-option>-->
      <!--</apes-select>-->
      <!--</p>-->
      <!--</apes-modal>-->

      <!--热点图-->
      <apes-card class="cad-image-content" [ngStyle]="showType == 2 ? {'display':'block'} : {'display':'none'}">
        <cad-image-content></cad-image-content>
      </apes-card>

      <!--配件-->
      <apes-card class="cad-parts-list" [ngStyle]="showType == 2 ? {'display':'block'} : {'display':'none'}">
        <cad-parts-list [publicPage]="publicPage"
                        [shoppingData]="shoppingData"
                        (selected)="orderParts($event)"
                        (errorParts)="compileTodo($event)"></cad-parts-list>
      </apes-card>

      <!--查询页-->
      <apes-card class="cad-search-content" [ngStyle]="showType == 3 ? {'display':'block'} : {'display':'none'}">
        <cad-search-content (pageIndex)="searchMatchParts($event)"
                            (sanTouPageIndex)="searchSanTouInquireParts($event)"
                            (selected)="orderParts($event)"
                            [publicPage]="publicPage"
                            [partsTag]="partsTag"
                            [baseData]="searchBaseData"
                            [showTagMore]="showTagMore"
                            [shoppingData]="shoppingData"
                            [showHidden]="showHidden"
                            (errorParts)="compileTodo($event)"
                            (tagPageIndex)="searchChangeIndex()"
                            (stockChange)="searchMatchParts($event)"
                            (filterChange)="searchFilterMatchParts($event)"
                            (tagChange)="searchMatchPartsName()"
                            (blackPage)="toggle($event)"></cad-search-content>
      </apes-card>

    </apes-card>

    <!--load-->
    <div class="cad-load-container" *ngIf="isLoading">

      <div class="cad-container">
        <div class="cad-load-title">
          {{showLoadingText}}
        </div>
        <div class="cad-progress">
          <!--cad-boxLoading-->
          <div [ngClass]="
          {
          'cad-boxLoading':showLoadingStep == 1,
          'cad-boxLoading2':showLoadingStep == 2,
          'cad-boxLoading3':showLoadingStep == 3,
          'cad-boxLoading4':showLoadingStep == 4,
          'cad-boxLoading5':showLoadingStep == 5
          }" class="cad-boxLoad">
            <div class="cad-boxLoading-rail"></div>
          </div>
        </div>
      </div>

    </div>

  </div>

</div>
